<template>
    <div :class='$style.container' @click.stop='click'>
        <slot></slot>
        <template v-if='loading'>
            <span :class='$style.loading'>
                <span :class='$style.wrap'>
                    <LoadingOutlined />
                </span>
            </span>
        </template>
    </div>
</template>

<script lang='ts' setup>
    import { ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue';
    import { Modal } from 'ant-design-vue';
    import { createVNode, ref } from 'vue';

    const props = defineProps<{
        click : () => Promise<any>,
        isConfirm? : boolean,
        confirmText? : string
        title? : string
    }>()

    const loading = ref(false)

    async function click() {
        if(loading.value) return
        if(props.isConfirm) {
            Modal.confirm({
                content : props.confirmText,
                title : props.title || '提示',
                icon: createVNode(ExclamationCircleOutlined),
                onOk : () => {
                    doClick()
                }
            })
            
        }else {
            doClick()
        }
        
    }

    async function doClick() {
        loading.value = true
        try {
            await props.click()
        } catch (error) {
            
        }
        loading.value = false
    }

</script>



<style scoped module lang='scss'>
    .container{
        display: inline-block;
        position: relative;
        
        .loading {
            position: absolute;
            z-index: 10;
            left: 0;
            top: 0;
            width:100%;
            height: 100%;
            cursor: not-allowed;
            background: rgba($color: #000000, $alpha: 0.5);

            .wrap{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
            }
        }

    }
</style>